<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style type="text/css">
			form .mui-input-row .mui-input-clear~.mui-icon-clear{top:10px;}
			form .authCode button{top:6px}
		</style>
		
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">添加银行卡</h1>
		</header>
		<div class="mui-content">
			<div id="boxCardNo">
				<h5 class="mui-content-padded pt-10">请绑定持卡人本人的银行卡</h5>
				<form class="mui-input-group mui-margin-top">
					<div class="mui-input-row">
						<label>持卡人</label>
						<input id='BankAccountName' type="text" class="mui-input-clear mui-input" disabled="disabled">
					</div>
					<div class="mui-input-row">
						<label>卡号</label>
						<input id='BankAccountNo' type="tel" maxlength="30" class="mui-input-clear mui-input" placeholder="银行卡号/无需网银" onkeyup="formatBankCard(this)">
					</div>
				</form>
				<h5 class="mui-content-padded">银行信息智能加密，保障你的用卡安全</h5>
				<div class="mui-content-padded pt-10">
					<button type="button" id="btnNext" class="mui-btn mui-btn-block mui-btn-danger">下一步</button>
				</div>
			</div>
			<div id="boxBank" style="display: none;">
				<form class="mui-input-group mui-margin-top">
					<div class="mui-input-row">
						<label>卡类型</label>
						<input id='BankName' type="text" class="mui-input-clear mui-input" placeholder="银行卡所属银行">
					</div>
				</form>
				<form class="mui-input-group mui-margin-top">
					<div class="mui-input-row cc">
						<label>有效期</label>
						<input id='ExpiryDate' type="number" oninput="if(value.length>4)value=value.slice(0,4)" class="mui-input-clear mui-input" placeholder="月份年份(MMYY)">
					</div>
					<div class="mui-input-row cc">
						<label>CVN2</label>
						<input id='CVV2' type="number" oninput="if(value.length>3)value=value.slice(0,3)" class="mui-input-clear mui-input" placeholder="信用卡背面后三位">
					</div>
					<div class="mui-input-row dc" style="display: none;">
						<label>密码</label>
						<input id='Password' type="password" oninput="if(value.length>6)value=value.slice(0,6)" class="mui-input-clear mui-input" placeholder="取款密码">
					</div>
					<div class="mui-input-row authCode">
						<label>手机号</label>
						<input id='MobileNo' type="tel" oninput="if(value.length>13)value=value.slice(0,13)" onkeyup="formatMobile(this)" class="mui-input-clear mui-input" placeholder="银行预留手机号">
						<button type="button" id="btnSendAuthCode" class="mui-btn-mini" data-type="添加银行卡" data-check="0">发送验证码</button>
					</div>
					<div class="mui-input-row">
						<label>验证码</label>
						<input id='AuthCode' type="number" oninput="if(value.length>4)value=value.slice(0,4)" class="mui-input-clear mui-input" placeholder="短信验证码">
					</div>
				</form>
				<form class="mui-input-group mui-margin-top cc">
					<div class="mui-input-row">
						<label>账单日</label>
						<input id='BillingDate' type="number" class="mui-input-clear mui-input" placeholder="出账单日">
					</div>
					<div class="mui-input-row">
						<label>还款日</label>
						<input id='RepaymentDate' type="number" class="mui-input-clear mui-input" placeholder="最后还款日">
					</div>
				</form>
				<h5 class="mui-content-padded">同意 <a id="btnServiceTerms" href="javascript:void();">《服务协议》</a></h5>
				<div class="mui-content-padded pt-10">
					<button type="button" id="btnSave" class="mui-btn mui-btn-block mui-btn-danger">完成</button>
				</div>
				<h6 class="mui-content-padded pt-5 cc"><span class="mui-icon iconfont icon-tip"></span> 信用卡添加完成后即交易10元作为验证信用卡准确性，此费用会返还到您的余额中</a></h6>
			</div>
			
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/data.bank.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			
			var account = app.account();
			var user = app.getUser().User
			var realName = user.Realname;
			var idNo = user.IDNo;
			var cardType = "", bankID = "", bankAccountNo = "";		
			var requestType = app.getParam("t");

			var $BankName = document.getElementById('BankName');
			var $BankAccountNo = document.getElementById("BankAccountNo");
			var userPicker = new mui.PopPicker();	
			
			function initCityPicker() {
				var cityPicker = new mui.PopPicker({
					layer: 2
				});
				cityPicker.setData(cityData);
				
				$City.addEventListener('tap', function(event) {
					cityPicker.show(function(items) {
						console.log(JSON.stringify(items));
						$City.value = items[0].text + " " + items[1].text;
						$City.setAttribute("data-value", items[0].text + "|" + items[1].text);
					});
				}, false);
			}
			
			function initBankPicker() {
				app.getBankNameData(function (data) {
					userPicker.setData(data);
				});
				
				$BankName.addEventListener('tap', function(event) {
					userPicker.show(function(items) {
						console.log(JSON.stringify(items[0]));
						
						$BankName.value = items[0].text;
						$BankName.setAttribute("data-value", items[0].value);
	
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				}, false);
			}
			
			function init() {
				document.getElementById("BankAccountName").value = realName;
				
				checkCardType();
			}
			
			function checkCardType(t) {
				var type = t || requestType;
				if(type == "0"){
					showClass("cc");
					hideClass("dc");
				}
				else if(type == "1"){
					showClass("dc");
					hideClass("cc");
				}
			}
			
			document.getElementById("btnNext").addEventListener('tap', function () {				
				bankAccountNo = $BankAccountNo.value.replace(/\s/g,"");
				
				if(bankAccountNo == ""){
					mui.toast("请输入银行卡号");
					return false;
				}
				
				mui.ajax("https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo="+ bankAccountNo +"&cardBinCheck=true", {
					//data: data,
					dataType: "json", //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					//headers:{'Content-Type':'application/json'},	              
					success: function(data) {	
						console.log(data);
						console.log(JSON.stringify(data));
						if(data.validated){		
							bankID = data.bank;
							cardType = data.cardType;
							
							if(requestType == 0 && cardType == "DC"){
								mui.alert("添加失败，请添加信用卡");
								return;
							}
							else if(requestType == 1 && cardType == "CC"){
								mui.alert("添加失败，请添加储蓄卡");
								return;
							}
							else if(requestType == 3){
								requestType = cardType == "DC" ? 1 : 0;
							}
							
							$id("BankName").value = dataBanks[bankID] + (cardType == "CC" ? " 信用卡" : " 储蓄卡"); 
							checkCardType(cardType == "CC" ? 0 : 1);
							
							show($id("boxBank"));
							hide($id("boxCardNo"));
						
							setTimeout(function () {
								$id("ExpiryDate").focus();					
							}, 200);		
						}
						else{
							mui.alert("该卡暂时不能开通快捷支付，请使用其它卡");
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(JSON.stringify(xhr));
						console.log(type + " error：" + errorThrown);
						
						switch(type) {
							case "error":
								mui.toast("系统错误：" + errorThrown);
								break;
							case "timeout":
							case "abort":
							case "parsererror":
							case "null":
							default:
								mui.toast("网络不可用");
								break;
						}
					}
				});
				
				
				return false;
			})
			
			document.getElementById("btnServiceTerms").addEventListener('tap', function () {
				 openExternalLinks("服务协议", app.server + "/app/PayServiceTerm.html", "PayServiceTerm");
				 return false;
			})
			
			document.getElementById("btnSave").addEventListener('tap', function(){		
				var billingDate = $id("BillingDate").value, repaymentDate = $id("RepaymentDate").value
				, expiryDate = $id("ExpiryDate").value, bankMobile = $id("MobileNo").value.replace(/\s/g,""), authcode = $id("AuthCode").value;
				var password = $id("Password").value;
									
				if($BankName.value == "" || $BankAccountNo.value == "" || bankMobile == "" || authcode == ""){
					mui.toast("请输入");
					return;
				}
				if(requestType == 0) {
					if(expiryDate == "" || $id("CVV2").value == "" || billingDate == "" || repaymentDate == "") {
						mui.toast("请输入");
						return;
					} else if(expiryDate * 1 > 1300) {
						mui.toast("请输入正确的有效期");
						return;
					} else if(billingDate > 32) {
						mui.toast("请输入正确的账单日");
						return;
					} else if(repaymentDate > 32) {
						mui.toast("请输入正确的还款日");
						return;
					}
				} 
				else if(requestType == 1) {
					if(password == "") {
						mui.toast("请输入");
						return;
					}
				}
				
				mui.showLoading();
				var wv = plus.webview.currentWebview().opener();
				app.post("AddBankCard", {Type:cardType == "CC" ? 0 : 1, Password:password, Name:realName, IDNo:idNo, BankCode:bankID,CardNo:bankAccountNo,ExpiryDate:expiryDate,CVV2:$id("CVV2").value
					,BankMobile:bankMobile,AuthCode:authcode,BillingDate:billingDate,RepaymentDate:repaymentDate},function(data){
					console.log(JSON.stringify(data));
					if(data.isSuccess) {
						mui.toast("银行卡添加成功");
						if(app.getParam("p") == "1"){
							app.getBankCardData(function () {
								wv.evalJS("buildBankCard()");
							});
						}
						else{
							wv.evalJS("refresh");
						}
						setTimeout(function () {
							mui.back();							
						}, 500);
					} else {
						mui.toast(data.message);
					}
				});
			});
			
			mui.plusReady(function () {
				init();
				
			})
		</script>
	</body>

</html>